<template>
  <div class="review-page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="报名审核"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      class="nav-bar"
    />

    <!-- 全选按钮 -->
    <div class="select-all">
      <van-checkbox v-model="selectAll" @change="toggleSelectAll">
        全选
      </van-checkbox>
    </div>

    <!-- 用户报名列表 -->
    <div class="user-list">
      <div
        v-for="user in userList"
        :key="user.id"
        class="user-item"
        :class="{ selected: selectedUsers.includes(user.id) }"
        @click="toggleSelect(user.id)"
      >
        <img :src="user.pic" alt="头像" class="user-avatar" />
        <div class="user-details">
          <p class="user-name">{{ user.userName }}</p>
          <p class="event-name">报名活动：{{ user.eventName }}</p>
        </div>
      </div>
    </div>

    <!-- 底部悬浮图标按钮 -->
    <div v-if="selectedUsers.length > 0" class="action-icons">
      <van-icon name="cross" class="cancel-icon" @click="rejectSelection" />
      <van-icon name="success" class="confirm-icon" @click="approveSelection" />
    </div>
  </div>
</template>

<script>
import organizerApi from "@/api/organizerProfile.js";
export default {
  data() {
    return {
      eventId: "",
      userList: [], // 包含头像、姓名、报名活动信息
      selectedUsers: [], // 存储选中的用户 ID
      selectAll: false, // 用于控制全选框的状态
    };
  },
  mounted() {
    this.eventId = this.$route.query.id;
    this.fetchUserList(); // 获取用户报名数据
  },
  methods: {
    fetchUserList() {
      organizerApi
        .getEventUncheckedRegistration(this.eventId)
        .then((res) => {
          console.log(res);
          this.userList = res;
        })
        .catch((error) => {
          console.error("获取用户列表失败", error);
        });
    },
    goBack() {
      this.$router.go(-1); // 返回上一页面
    },
    toggleSelect(userId) {
      if (this.selectedUsers.includes(userId)) {
        this.selectedUsers = this.selectedUsers.filter((id) => id !== userId);
      } else {
        this.selectedUsers.push(userId);
      }
      this.updateSelectAllStatus();
    },
    toggleSelectAll() {
      this.selectAll
        ? (this.selectedUsers = this.userList.map((user) => user.id))
        : (this.selectedUsers = []);
    },
    updateSelectAllStatus() {
      this.selectAll = this.userList.length === this.selectedUsers.length;
    },
    approveSelection() {
      if (this.selectedUsers.length > 0) {
        organizerApi
          .registrationBatchApprove(this.selectedUsers)
          .then(() => {
            this.$toast.success("审核通过成功");
            this.selectedUsers = [];
            this.fetchUserList();
          })
          .catch((error) => {
            console.error("审核通过失败", error);
            this.$toast.fail("审核通过失败");
          });
      }
    },
    rejectSelection() {
      if (this.selectedUsers.length > 0) {
        organizerApi
          .registrationBatchReject(this.selectedUsers)
          .then(() => {
            this.$toast.success("审核拒绝成功");
            this.selectedUsers = [];
            this.fetchUserList();
          })
          .catch((error) => {
            console.error("审核拒绝失败", error);
            this.$toast.fail("审核拒绝失败");
          });
      }
    },
  },
};
</script>

<style scoped>
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow{
  color: white !important;
}
.review-page {
  font-family: Arial, sans-serif;
  height: 100vh;
  overflow-y: auto;
}

/* 导航栏样式 */
.nav-bar {
  background-color: #007aff;
}

/* 用户列表样式 */
.user-list {
  padding: 1vh;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 1.5vh;
  margin-bottom: 1vh;
  background: #f7f7f7;
  border-radius: 0.5vh;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.1);
}

.user-item.selected {
  background: #d3f9d8;
  border: 0.2vh solid #52c41a;
}

.user-avatar {
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  margin-right: 1vh;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 2.2vh;
  font-weight: bold;
  color: #333;
}

.event-name {
  font-size: 2vh;
  color: #666;
}

/* 全选按钮样式 */
.select-all {
  margin: 1vh 2vh;
}

/* 底部悬浮图标样式 */
.action-icons {
  position: fixed;
  bottom: 5vh;
  right: 2vh;
  display: flex;
  gap: 3vh;
  justify-content: flex-end;
}

.cancel-icon,
.confirm-icon {
  width: 7vh;
  height: 7vh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  font-size: 5vh;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-icon {
  color: #f5222d;
}

.confirm-icon {
  color: #52c41a;
}

.cancel-icon:hover,
.confirm-icon:hover {
  transform: scale(1.1);
}
</style>
